<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view>
    <view class="index" v-if="detailInfo">

      <!--顶部-->
      <u-navbar
          :safeAreaInsetTop="false"
          :placeholder="false"
          :is-back="true"
          :is-fixed="true"
          :title="detailInfo.nickname"
          :border-bottom="false"
          :title-bold="true"
          :title-color="'#111111'"
          :background="{ background : navBg }"
      >
      </u-navbar>

      <view class="page-main mt-2" v-if="detailInfo">
        <view class="page-banner">
          <u-swiper border-radius="20"
                    mode="none"
                    img-mode="aspectFit"
                    :list="bannerList"
                    :autoplay="false"
                    :current="bannerCurrent"
                    @change="bannerChange"
                    duration="700"
                    :circular="false"
                    :height="690">

          </u-swiper>
          <view class="banner-imgList">
            <view @click="bannerItemClick(item,index)" :class="{active : bannerCurrent === index}" class="imgList-item"
                  v-for="(item,index) in bannerList" :key="index">
              <image class="item-img" mode="aspectFit" :src="item.image"></image>
            </view>
          </view>
        </view>
        <view class="page-dataCard page-box">
          <view class="dataCard-info">
            <view class="info-data">
              <view class="data-top">
                <view class="top-name page-line1">
                  {{ detailInfo.nickname }}
                </view>
                <view class="top-sex" v-if="detailInfo.sex === '男'">
                  <u-icon class="sex-icon" size="22rpx" color="#fff" name="man"></u-icon>
                </view>
                <view class="top-sex top-sexNv" v-if="detailInfo.sex === '女'">
                  <u-icon class="sex-icon" size="22rpx" color="#fff" name="woman"></u-icon>
                </view>
                <view class="top-id">
                  ID: {{ detailInfo.sn }}
                </view>
              </view>
              <view class="data-bottom">
                <view class="bottom-user">
                  <view class="user-img">
                    <image v-for="(item,index) in detailInfo.footprint.listImage" :key="index" class="img-one"
                           :src="item"
                           mode="aspectFill"></image>
                  </view>
                  <view class="user-text">
                    有{{ detailInfo.footprint.count }}人查看过
                  </view>
                </view>
              </view>
            </view>
            <view class="info-collect" :class="{'collect-no' : !isCollect}" @click="userCollection">
              <image class="collect-pic" mode="aspectFit" :src="`${$domain}/static/icons/guest/collect.svg`"></image>
              <view>{{ isCollect ? '取消收藏' : '收藏' }}</view>
            </view>
          </view>
          <view class="dataCard-list">
            <view class="list-item">
              <image class="item-pic" :src="`${$domain}/static/icons/guest/data.svg`"></image>
              <view class="item-text">
                {{ detailInfo.age }}岁 天蝎座 属{{ detailInfo.zodiac }}
              </view>
            </view>
            <view class="list-item">
              <image class="item-pic" :src="`${$domain}/static/icons/guest/my.svg`"></image>
              <view class="item-text">
                {{ detailInfo.height ? detailInfo.height + 'cm' : '' }} {{ detailInfo.weight }}kg
              </view>
            </view>
            <view class="list-item">
              <image class="item-pic" :src="`${$domain}/static/icons/guest/xueli.svg`"></image>
              <view class="item-text">
                {{ detailInfo.education }}
              </view>
            </view>
            <view class="list-item">
              <image class="item-pic" :src="`${$domain}/static/icons/guest/gongsi.svg`"></image>
              <view class="item-text">
                {{ detailInfo.work }}
              </view>
            </view>
            <view class="list-item">
              <image class="item-pic" :src="`${$domain}/static/icons/guest/zhuzhi.svg`"></image>
              <view class="item-text">
                <view>{{ detailInfo.hometown }}</view>
              </view>
            </view>
          </view>
        </view>
        <tabs
            :current="navCurrent"
            @change="navChange"
            bar-width="60"
            :isScroll="false"
            :activeColor="'#111'"
            :bgColor="'transparent'"
            :stickyBgColor="'transparent'"
            :fontSize="34"
            :height="80"
            :bold="true"
            :inactiveColor="'#888'"
            :barStyle="{
          bottom: '-8rpx',
          height: '8rpx',
          borderRadius: '8rpx',
          backgroundColor: 'transparent',
          backgroundImage: 'linear-gradient(to right, var(--color-primary), var(--color-minor))'
        }"
        >
          <tab v-for="(item, i) in navList" :key="i" :name="item.name">
            <view v-if="i === 0">
              <guest-detail-data :detailInfo="detailInfo"></guest-detail-data>
            </view>
            <view v-if="i === 1">
              <view class="page-box">
                <dynamic-list :userData="detailInfo" :dynamicData="dynamicListData.lists"></dynamic-list>
              </view>
              <u-loadmore :status="loadMore" />

            </view>
            <view v-if="i === 2">
              <guest-detail-album :list="bannerList"></guest-detail-album>
            </view>
          </tab>
        </tabs>

      </view>

      <!--底部-->
      <view class="page-bottom">
        <view class="bottom-con">
          <matchmaker-auth
              :detailInfo="detailInfo"
              style="width: 100%">
            <template v-slot="{ getMyDisInfo }">
              <view class="con-btn" @click="getMyDisInfo">
                <view>红娘牵线</view>
              </view>
            </template>
          </matchmaker-auth>
          <view class="con-btn con-btnActive" @click="toDetail">
            <image src="/static/images/icon/love.svg"
                   class="btn-pic" mode="aspectFit"></image>
            <view class="btn-text">
              打招呼
            </view>
          </view>
        </view>
      </view>
      <view class="page-bottomFooter"></view>

    </view>

  </view>

</template>
<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import MpPrivacyPopup from "@/pages/index/component/mp-privacy-popup.vue";
import {onLoad, onPageScroll, onReachBottom, onShow} from "@dcloudio/uni-app";
import GuestDetailData from "./components/guestDetailData.vue";
import GuestDetailAlbum from "./components/guestDetailAlbum.vue";
import {getDynamicListApi, getGuestsInfo, getUserGroupInfoApi, getUserInfoApi, userCollectionApi} from "@/api/new";
import {useAppStore} from "@/stores/app";

const scrollTop = ref<number>(0)
const navBg = ref<string>('rgba(255,255,255,0)')


const isCollect = ref(false)

const navCurrent = ref(0)
const navList = ref([
  {
    name: '个人资料',
    id: '',
  },
  {
    name: 'Ta的动态',
    id: 1,
  },
  {
    name: 'Ta的相册',
    id: 2,
  }
])


onPageScroll((event: any) => {
  scrollTop.value = event.scrollTop
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
})


const state = reactive<{
  pages: any[]
  meta: any[]
  article: any[]
  bannerImage: string
}>({
  pages: [],
  meta: [],
  article: [],
  bannerImage: ''
})

const appStore = useAppStore()
const domain = appStore.getDomain

const bannerList:any = ref([
  {
    image: `${domain}/static/icons/public/noPic.png`,
    title: ''
  }
])

const bannerCurrent = ref(0)


const navChange = (item: any) => {
  console.log('item', item)
  navCurrent.value = item
}

const bannerItemClick = (item: any, index: any) => {
  bannerCurrent.value = index
}
const bannerChange = (e: any) => {
  bannerCurrent.value = e
}


const toDetail = async () => {
  const data = await getUserGroupInfoApi({
    page_no: 1,
    page_size: 20,
    id: optionsInfo.value.id
  })
  if (data.id) {
    uni.navigateTo({
      url: '/packagesA/pages/massageDetail/massageDetail?group_id=' + data.id + '&goal_user_id=' + optionsInfo.value.id
    })
  } else {
    uni.showToast({
      title: '获取对话组id失败',
      icon: 'none'
    })
  }
}

let optionsInfo = ref({
  id: null
})
const detailInfo = ref()

const getDetail = async () => {
  const data = await getGuestsInfo({
    id: optionsInfo.value.id
  })
  detailInfo.value = data
  isCollect.value = data.is_collection === 1
  bannerList.value = []
  if (data.albumList.length > 0) {
    data.albumList.forEach((item:any,index:any) => {
      bannerList.value.push({
        image: item,
        title: ''
      })
    })
  } else {
    bannerList.value.push({
      image: data.avatar,
      title: ''
    })
  }

}

const dynamicListData = ref({
  count: '',
  lists: []
}) as any

const FormData = ref({
  id: 0,
  page_no: 1,
  page_size: 10,
})

let loadMore = ref('loading')

const getDynamicList = async () => {
  loadMore.value = 'loading'
  const data = await getDynamicListApi(FormData.value)
  dynamicListData.value.count = data.count
  dynamicListData.value.lists.push(...data.lists)
}


onReachBottom(() => {
  if (navCurrent.value === 1) {
    FormData.value.page_no += 1
    if (dynamicListData.value.lists.length < dynamicListData.value.count) {
      getDynamicList()
    } else {
      loadMore.value = 'nomore'
    }
  }
})

// 收藏/取消收藏
const userCollection = async () => {
  await userCollectionApi({
    id: optionsInfo.value.id
  })
  isCollect.value = !isCollect.value
}

onLoad((options:any) => {
  optionsInfo.value = options
  if (!optionsInfo.value.id) {
    uni.showModal({
      title: '提示',
      content: '当前信息id不存在',
      showCancel: false,
      success: function (res) {
        if (res.confirm) {
          uni.navigateBack()
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      }
    });
    return;
  } else {
    FormData.value.id = optionsInfo.value.id
    getDetail()
    getDynamicList()
  }
})


</script>
<style lang="scss">

page {
  position: relative;

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(var(--color-primary) 10%, transparent);
    opacity: 0.2;
  }
}
</style>
<style scoped lang="scss">
.index {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
}

.page-main {
  padding: 0 30rpx;
}

.page-banner {
  position: relative;

  .banner-imgList {
    position: absolute;
    width: 100%;
    padding: 30rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    bottom: 0;

    .imgList-item {
      margin-right: 20rpx;
      position: relative;
      overflow: hidden;
      width: 90rpx;
      height: 90rpx;
      border: 6rpx solid #ffffff;
      border-radius: 10rpx;

      &:before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(4rpx);
        z-index: 2;
      }

      .item-img {
        width: 90rpx;
        height: 90rpx;
      }
    }

    .active {
      &:before {
        content: none;
      }
    }
  }
}

.page-dataCard {
  .dataCard-info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    border-bottom: 2rpx solid #dddddd;
    padding-bottom: 30rpx;

    .info-data {
      width: 100%;
      margin-left: 20rpx;

      .data-top {
        display: flex;
        align-items: center;

        .top-name {
          font-size: 36rpx;
          color: #111111;
          font-weight: bold;
        }

        .top-sex {
          background-color: #669cff;
          width: 30rpx;
          height: 30rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          text-align: center;
          margin-left: 10rpx;
          margin-bottom: 10rpx;
          &Nv {
            background-color: #FF668A;
          }

          .sex-icon {
            display: inline-block;
            margin-left: 2rpx;
          }
        }

        .top-id {
          font-size: 28rpx;
          color: var(--color-primary);
          margin-left: 10rpx;
        }

        .top-label {
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #CCBBFF;
          padding: 4rpx 20rpx;
          border-radius: 40rpx;
          line-height: normal;
          font-size: 30rpx;
          transform: scale(0.8);

          .label-icon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }
        }

      }

      .data-line {
        overflow: hidden;
        margin-top: 10rpx;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        border-radius: 40rpx;
        font-size: 24rpx;
        color: #ffffff;
        position: relative;

        &:before {
          content: '';
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          background-color: var(--color-primary);
          opacity: 0.1;
        }

        .line-left {
          flex-shrink: 0;
          border-radius: 40rpx 10rpx 70rpx 40rpx;
          padding: 4rpx 24rpx 4rpx 20rpx;
          background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
          margin-right: 20rpx;
          position: relative;
        }

        .line-right {
          color: var(--color-primary);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 30%;
        }
      }

      .data-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 20rpx;

        .bottom-user {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #999;

          .user-img {
            display: flex;
            align-items: center;
            flex-shrink: 0;
            margin-left: 15rpx;
            margin-right: 10rpx;

            .img-one {
              display: none;
              &:nth-child(-n+5) {
                display: block;
              }
              flex-shrink: 0;
              width: 50rpx;
              height: 50rpx;
              margin-left: -25rpx;
              border-radius: 50%;
              border: 2rpx solid #fff;
              box-shadow: 0 0 20rpx -10rpx rgba(0, 0, 0, 0.5);
            }
          }
        }

        .bottom-btn {
          flex-shrink: 0;
          padding: 10rpx 30rpx;
          background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
          position: relative;
          overflow: hidden;
          font-size: 28rpx;
          color: #ffffff;
          font-weight: bold;
          border-radius: 80rpx;

          .btn-pic {
            width: 100rpx;
            height: 100rpx;
            position: absolute;
            left: 0;
            top: 0;
            transform: translateX(-20%);
          }
        }
      }
    }

    .info-collect {
      flex-shrink: 0;
      font-size: 30rpx;
      color: #666666;
      text-align: center;

      .collect-pic {
        width: 50rpx;
        height: 50rpx;
        display: inline-block;
      }
    }

    .collect-no {
      .collect-pic {
        transition: all .3s ease;
        filter: grayscale(100%);
        opacity: .6;
      }
    }
  }

  .dataCard-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

    .list-item {
      margin-top: 40rpx;
      min-width: 48%;
      flex-shrink: 0;
      font-size: 30rpx;
      line-height: 34rpx;
      color: #666666;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;

      &:last-child {
        width: 100%;

        .item-text {
          line-height: 45rpx;
        }
      }

      .item-pic {
        width: 34rpx;
        height: 34rpx;
        flex-shrink: 0;
        margin-right: 20rpx;
      }
    }
  }
}

.page-bottom {
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
  position: fixed;
  left: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 999;

  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }

  &:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, #F7F2FE 3%, rgba(247, 242, 254, 0) 100%);
  }

  .bottom-con {
    height: 140rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;

    .con-btn {
      color: #ffffff;
      font-size: 32rpx;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      width: 100%;
      border-radius: 40rpx;
      height: 80rpx;
      line-height: 80rpx;
      background: var(--color-minor);
      box-shadow: inset 0 4rpx 20rpx 0 rgba(255, 255, 255, 0.4);

      &Active {
        background: linear-gradient(90deg, var(--color-primary), var(--color-minor));
        width: 60%;
        margin-left: 20rpx;
        flex-shrink: 0;
      }

      .btn-pic {
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateX(-20%);
      }
    }
  }
}
</style>